<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="profile-list ">


        <div class="title-list  left-back">
            <div class="progress-container">
                <div v-for="cur in list" class="progress-container-li">
                    <span class="size-color-1">{{ cur.name }}</span>
                    <span class="size-color">{{ cur.value }}</span>
                </div>
            </div>

        </div>
        <ConstructionUnitStats></ConstructionUnitStats>
        <!-- <div class="profile-box">
            <div class="working-rain" ref="workingRain">
            </div>

            <div class="profile-list">
                <div v-for="cur in workerList" class="profile--list-item">
                    <div class="circle-ring" :style="{ border: `5px solid` + cur.color }"></div>
                    <div>{{ cur.name }}</div>
                    <div>{{ cur.num }}</div>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import * as echarts from "echarts";
import ConstructionUnitStats from "@/components/ConstructionUnitStats.vue"
import { getProjectWorkerStatic, getSubcontractorWorkerStatic } from "@/js/api/businessApi.js"
const  workingRain = ref(null);
const list = ref([{
    name: "项目名称",
    value: "太原赵北峰城中村改造项目地块一（二期）"
}, {
    name: "项目合同",
    value: "49388.6万元"      
}, {
    name: "建设单位",
    value: "山西龙图置业有限公司"      
}, {
    name: "计划开竣工",
    value: "2022-09-30 - 2025-09-29  共1095天"      
}, {
    name: "实际开竣工",
    value: "2022-09-30 - 2025-09-30  共1096天"      
}]);
const workerList = ref([]);
const initBuild = function (cur) {
    var myChart = echarts.init(workingRain.value);
    const number = 100 / cur.length;
    const lastArray = cur.map((config, index) => {
        return {
            type: 'gauge',
            center: ['50%', '50%'], // 中心位置
            radius: (15 + index * number * 0.8) + '%',           // 外环半径
            startAngle: 90,
            endAngle: -270, // 根据数值计算结束角度
            min: 0,
            max: 100,
            pointer: {
                show: true, // 显示指针
                length: '75%',
                width: 8
            },
            splitNumber: 10,
            axisLine: {
                lineStyle: {
                    width: 10,       // 环的宽度
                    color: [[1, "#0f365f"]] // 外环颜色
                }
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#464646'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            },
            title: {
                show: false
            }
        }
    })
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return `当前值: ${params.value}`;
            }
        },
        series: lastArray.concat(cur.map((config, index) => {
            return {
                type: 'gauge',
                center: ['50%', '50%'], // 中心位置
                radius: (15 + index * number * 0.8) + '%',           // 外环半径
                startAngle: 90,
                endAngle: 90 - (config.num / 100) * 180 * 2, // 根据数值计算结束角度
                pointer: {
                    show: false, // 显示指针
                },
                axisLine: {
                    lineStyle: {
                        width: 10,       // 环的宽度
                        color: [[1, config.color]] // 外环颜色
                    }
                },
                progress: {
                    show: true,
                    roundCap: true,
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                title: {
                    show: false
                }
            }
        }))
    };
    myChart.setOption(option);
    // 为窗口的resize事件绑定处理函数
    window.onresize = function () {
        // 让echarts图表实例调用resize方法，以适应新窗口大小
        myChart.resize();
    };
    // 自定义提示
    var tip = document.createElement('div');
    tip.style.position = 'absolute';
    tip.style.display = 'none';
    tip.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    tip.style.color = '#fff';
    tip.style.padding = '5px 10px';
    tip.style.borderRadius = '4px';
    tip.style.fontSize = '14px';
    document.body.appendChild(tip);

    myChart.getZr().on('mousemove', function (params) {
        var pointInPixel = [params.offsetX, params.offsetY];
        var pointInData = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);

        if (pointInData) {
            tip.style.display = 'block';
            tip.style.left = params.offsetX + 10 + 'px';
            tip.style.top = params.offsetY + 10 + 'px';
            tip.innerHTML = `当前值: ${pointInData[0]}`;
        } else {
            tip.style.display = 'none';
        }
    });

    myChart.getZr().on('mouseout', function () {
        tip.style.display = 'none';
    });


}
onMounted(() => {
    // getProjectWorkerStatic({"projectId": "19"}).then((data) => {
    //     if(data.data){
    //         list.value = [{
    //             value: data.data.total,
    //             name: "登记工人总人数"
    //         }, {
    //             value: data.data.online,
    //             name: "当前在线工人数"
    //         }]
    //     }
    // })

    
});
</script>

<style scoped lang="less">
.circle-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    //   border: 10px solid #3498db; /* 圆环的颜色和宽度 */
    background-color: transparent;

    /* 透明背景 */
}

.progress-container {
    width: 100%;
    padding: 30px;
    font-size: 22px;
    height: 280px;
    .size-color{
        color: #D9F1FD ;
    }
    .size-color-1{
        width: 108px;
        font-size: 19px;
        float: left;
        display: block;
    }
    .progress-container-li{
        line-height: 30px;
        margin-bottom: 16px;
    }
}

.progress-bar {
    height: 30px;
    background-image: url('@/assets/layer/line.png');
    /* 使用阿里云CDN上的纹理图案 */
    background-size: 100% 100%;
    height: 1.5rem;
}

.profile-list {
    padding: 1rem 0rem;

    .profile-title {
        font-size: 1.4rem;
        margin-bottom: 3rem;
    }



    .profile-box {
        display: flex;
        flex-wrap: wrap;

        .working-rain {
            width: 20rem;
            height: 20rem;
        }

        .profile-list {
            width: 70%;
            display: flex;
            // align-items: center;
            flex-direction: column;
            font-size: 1.4rem;


            .profile--list-item {
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>